.e-onboarding {
	--theme-card-primary-color: #D004D4;
	--theme-card-primary-shadow: 0 6px 16px rgba(208, 4, 212, 0.25);
	--theme-card-hover-transform: translateY(-2px);

	&__action-button-text {
		margin-inline-start: 10px;
	}

	&__page-content-theme-variant-b {

		.e-onboarding__page-content-section-title {
			line-height: 40px;
		}

		.e-onboarding__theme-selection-description,
		.e-onboarding__theme-selection-subtitle {
			font-size: 18px;
			font-weight: 400;
			margin-block-end: 8px;
			text-align: center;
			color: #3A3F45;
		}

		.e-onboarding__theme-selection-subtitle {
			font-weight: 600;
		}

		.e-onboarding__theme-cards {
			display: flex;
			gap: 24px;
			justify-content: center;
			flex-wrap: wrap;
			margin-block-start: 48px;
		}

		.e-onboarding__theme-card {
			background: #ffffff;
			border: 1px solid #A9A9A9;
			border-radius: 8px;
			padding: 16px 25px 165px;
			max-width: 325px;
			min-width: 280px;
			cursor: pointer;
			transition: none;
			display: flex;
			flex-direction: column;
			position: relative;
			overflow: hidden;
			margin-block: 1px;

			&::after {
				content: '';
				position: absolute;
				inset-block-start: 14px;
				inset-inline-start: 16px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid black;
			}

			&:hover,
			&--loading,
			&--selected {
				border: 2px solid #0C0D0E;
				margin-block: 0px;

				&::before {
					content: '';
					background: black;
					position: absolute;
					top: 14px;
					left: 16px;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					border: 4px solid white;
				}
			}
		}

		.e-onboarding__theme-card-illustration {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			inset-block-end: 0px;
			width: calc(100% - 50px);

			img {
				width: calc(100% - 80px);
			}
		}

		.e-onboarding__theme-card-content {
			text-align: center;
		}

		.e-onboarding__theme-card-label {
			display: flex;
			justify-content: center;
			color: #69727D;
			font-family: "DM Sans";
			font-size: 12px;
			font-weight: 400;
			line-height: 150%;
			letter-spacing: -0.12px;
			margin-block-end: 16px;

			span {
				font-weight: 600;
				padding-inline-end: 4px;
			}
		}

		.e-onboarding__theme-card-title {
			color: #0C0D0E;
			text-align: center;
			font-family: "DM Sans";
			font-size: 18px;
			font-weight: 700;
			line-height: 130%;
			letter-spacing: 0.36px;
			margin-block-end: 4px;
		}

		.e-onboarding__theme-card-description {
			color: #3A3F45;
			text-align: center;
			font-family: "DM Sans";
			font-size: 14px;
			font-weight: 400;
			line-height: 150%;
			letter-spacing: -0.14px;
			margin: 0;
		}
	}

	&__page-content:has(.e-onboarding__page-content-theme-variant-b) {
		flex-direction: column;
	}

	&__page-content-start:has(.e-onboarding__page-content-theme-variant-b) {
		align-self: center;
		text-align: center;
		flex-basis: initial;
	}

	&:has(.e-onboarding__page-content-theme-variant-b) {

		.e-onboarding__page-content-section-title {
			line-height: 1.3;
			margin-block-end: 10px;
		}

		.e-onboarding__progress-bar {
			margin-block-end: 85px;
		}

		.e-onboarding__footnote {
			opacity: 0;
		}

		.e-onboarding__notice {
			display: flex;
			justify-content: center;
		}

		.e-onboarding__footer {
			justify-content: center;
			padding-block-end: 40px;
		}
	}
}

@media screen and (min-width: 769px) {
	.e-onboarding:has(.e-onboarding__page-content-theme-variant-b) {

		.e-onboarding__button-skip {
			position: absolute;
			inset-inline-end: 30px;
		}
	}
}

@media screen and (max-width: 768px) {
	.e-onboarding__footer {
		flex-direction: column;
		gap: 10px;
	}
}
